<template>
  <div class="wrapper">
    <div class="jiesuanhead">结算中心</div>
    <div class="xinxi">
      <ul>
        <li>
          <span>李四</span>
          <span>15012341234</span>
        </li>
        <li>
          <p>河南省新乡市红旗区南干道与新中大道交叉口B座10楼102室；邮编453000</p>
          <div @click="goxiugai">修改地址</div>
        </li>
      </ul>
    </div>
    <div class="bendan">
      <span>本单请支付</span>
      <span>￥392.12</span>
    </div>
    <div class="zhifu">
      <ul>
        <li class="three">
          使用第三方支付平台:
        </li>
        <li class="fukuan">
          <div class="zfb">
            <img class="zfwx" src="../../assets/img/cart/zfb.png" alt="">
            <span>支付宝支付</span>
          </div>
          <div @click="xianyi">
          <img v-show="dui1" src="../../assets/img/cart/duihao.png" alt="">
          <img v-show="dui2" src="../../assets/img/cart/huiduihao.png" alt="">
          </div>
        </li>
        <li class="fukuan">
          <div>
            <img class="zfwx" src="../../assets/img/cart/wx.png" alt="">
            <span>微信支付</span>
          </div>
          <div @click="xianer">
          <img v-show="dui3" src="../../assets/img/cart/duihao.png" alt="">
          <img v-show="dui4" src="../../assets/img/cart/huiduihao.png" alt="">
          </div>
        </li>
        <li class="shouqi">
          <span>收起</span>
          <img src="../../assets/img/cart/topjiantou.png" alt="">
        </li>
      </ul>
    </div>
    <div class="queren">
      <span>确认支付</span>
    </div>
  </div>

</template>
<script>

  export default {
    data(){
      return{
        dui1:true,
        dui2:false,
        dui3:false,
        dui4:true
      }
    },
    methods:{
      goxiugai(){
        this.$router.push({path:'/dingdanxq'})
      },
      xianyi(){
        this.dui1=!this.dui2

        this.dui3=!this.dui4

      },
      xianer(){
        this.dui1=true
        this.dui2=false
        this.dui3=false
        this.dui4=true
      }
    }

  }
</script>
<style scoped>
  .wrapper{
    background: #f2f2f2;
  }
  .jiesuanhead{
    background: #e53e42;
    height: 3rem;
    line-height: 4rem;
    text-align: center;
    color: #fff;
  }
  .xinxi{
    background: #fff;
  }
  .xinxi ul{
    padding:0.3rem 0.5rem;
  }
  .xinxi ul li:first-child span{
    font-size: 0.8rem;
    margin-right: 10%;
  }
  .xinxi ul li:last-child{
    display: flex;
    justify-content: space-between;
  }
  .xinxi ul li:last-child p{
     font-size: 0.4rem;
    width: 50%;
  }
  .xinxi ul li:last-child div{
     font-size: 0.7rem;
     width: 2rem;
     height: 2rem;
     margin-right: 1rem;
     padding: 0.1rem;
    text-align: center;
     border: 1px solid #ccc;
     border-radius: 50%;
  }
  .bendan{
    background: #fff;
    margin-top: 0.5rem;
    padding: 0.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  .bendan span:last-child{
    color: #e53e42;
  }
  .zhifu{
    background: #fff;
    margin-top: 0.5rem;
  }
  .zhifu ul li{
    padding: 0.3rem;
    font-size: 0.6rem;
  }

  .zhifu ul  .zfwx{
    width: 1rem;
  }
  .zhifu ul .three{
    font-size: 0.8rem;
  }
  .fukuan{
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .fukuan div{
    display: flex;
    align-items: center;
  }
  .fukuan div img{
    margin-right: 0.5rem;
  }
  .shouqi{
    text-align: center;
  }
  .shouqi img{
    width: 0.6rem;
  }
  .queren{
    width: 70%;
    text-align: center;
    margin: 0 auto;
    padding: 4.75rem 0.5rem;
  }
  .queren span {
    display: block;
    text-align: center;
    background: #e53e42;
    width: 90%;
    padding: 0.3rem 0.5rem;
    list-style: none;
    border-radius:1rem;
    font-size: 0.8rem;
    color: #fff;
  }
</style>
